<template>
    <div>
      <a-card>
        <a-row :gutter="20">
        <a-col :span="6">
          <!-- @click="showModal"  绑定对话框是否可见 -->
          <a-button type="primary" icon="plus-circle" @click="showModal">新增分类</a-button>
        </a-col>
        </a-row>

        <!-- 表格内容 rowKey 表格行 key 的取值，可以是字符串或一个函数-->
      <a-table
        bordered
        :pagination="pagination"
        :columns="columns"
        :data-source="cateList"
        rowKey="id">
            <template slot="action" slot-scope="data">
                <div>
                    <a-button type="primary"
                     icon="edit"
                     style="margin-right:15px"
                     @click="editCate(data.id)"
                     >
                     编辑</a-button>
                    <a-button type="danger"
                     icon="delete"
                     style="margin-right:15px"
                     @click="deleteCate(data.id)"
                      >
                      删除</a-button>
                </div>
            </template>
      </a-table>
      </a-card>

      <!-- 新增分类  Modal 对话框-->
      <!-- closable:是否显示右上角的关闭按钮;-->
      <!-- 通过 rules 属性传入约定的验证规则，并将 FormItem 的 prop 属性设置为需校验的字段名即可;
          ref 引用对象：除了可以获取本页面的dom元素，还可以拿到子组件中的data和去调用子组件中的方法 -->
      <a-modal
        title="新增分类"
        closable
        :visible="visible"
        @ok="addCateHandleOk"
        @cancel="addCateHandleCancel">
        <!-- :model相当于v-bind:model的缩写，
        v-bind动态绑定指令，默认情况下标签自带属性的值是固定的
        rules="addCateRules 传入约定的验证规则, 使用 prop 引用
        ref="CateRef" 引用对象-->
        <a-form-model :model="newCate" :rules="addCateRules" ref="cateRef">
          <a-form-model-item label="分类名称" prop="name">
            <!-- v-model="newCate.name" 数据绑定 -->
            <a-input v-model="newCate.name"></a-input>
          </a-form-model-item>

        </a-form-model>
      </a-modal>

       <!-- 编辑分类 -->
      <a-modal
        title="编辑分类"
        closable
        :visible="eidtVisible"
        @ok="editCateHandleOk"
        @cancel="editCateHandleCancel">
        <!-- :model相当于v-bind:model的缩写，
        v-bind动态绑定指令，默认情况下标签自带属性的值是固定的
        rules="editCateRules 传入约定的验证规则, 使用 prop 引用
        ref="cateRef" 引用对象-->
        <a-form-model :model="cateInfo" :rules="editCateRules" ref="cateRef">
          <a-form-model-item label="用户名" prop="name">
            <!-- v-model="cateInfo.name" 数据绑定 -->
            <a-input v-model="cateInfo.name"></a-input>
          </a-form-model-item>

        </a-form-model>
      </a-modal>
    </div>
</template>

<script>
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: '10%',
    key: 'id',
    align: 'center'
  },
  {
    title: '分类名',
    dataIndex: 'name',
    width: '20%',
    key: 'name',
    align: 'center'
  },
  {
    title: '操作',
    width: '30%',
    key: 'action',
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  data () {
    return {
      columns,
      cateList: [],
      // 分页设置
      pagination: {
        pageSizeOptions: ['5', '10', '20'],
        pageSize: 5,
        total: 0,
        showSizeChanger: true,
        // hideOnSinglePage: true,
        showTotal: (total) => `共${total}条`
      },
      queryParam: {
        pagesize: 5,
        pagenum: 1
      },
      visible: false,
      newCate: {
        name: ''
      },
      // 添加分类表单规则
      addCateRules: {
        name: [
          {
            validator: (rule, value, callback) => {
              if (this.newCate.name === '') {
                callback(new Error('请输入分类名'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      },
      // 编辑分类
      cateInfo: {
        id: 0,
        name: ''
      },
      eidtVisible: false,
      // 编辑分类表单规则
      editCateRules: {
        name: [
          {
            validator: (rule, value, callback) => {
              if (this.cateInfo.name === '') {
                callback(new Error('请输入分类名'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  // 生命周期函数
  created () {
    this.getCateList()
  },
  methods: {
    // 模态对话框开启
    showModal () {
      this.visible = true
    },
    // 获取后端数据列表
    async getCateList () {
      const { data: res } = await this.$http.get('cates', {
        params: {
          pagesize: this.queryParam.pageSize,
          pagenum: this.queryParam.pageNum
        }
      })
      console.log(res.data)
      if (res.status !== 200) return this.$message.error(res.message)
      this.cateList = res.data
      this.pagination.total = res.total
    },
    // 更改分页
    handleTableChange (pagination, filters, sorter) {
      var pager = { ...this.pagination }
      pager.current = pagination.current
      pager.pageSize = pagination.pageSize
      this.queryParam.pageSize = pagination.pageSize
      this.queryParam.pageNum = pagination.current

      if (pagination.pageSize !== this.pagination.pageSize) {
        this.queryParam.pageNum = 1
        pager.current = 1
      }
      this.pagination = pager
      this.getCateList()
    },
    // 删除操作
    deleteCate (id) {
      this.$confirm({
        title: '提示: 请确认是否删除',
        content: '确定要删除该分类吗？一旦删除，无法恢复',
        onOk: async () => {
          const res = await this.$http.delete(`cate/${id}`)
          if (res.status !== 200) return this.$message.error(res.message)
          this.$message.success('删除成功')
          this.getCateList()
        },
        onCancel: () => {
          this.$message.info('已取消删除')
        }
      })
    },
    // 确认新增分类
    addCateHandleOk () {
      this.$refs.cateRef.validate(async (valid) => {
        if (!valid) return this.$message.error('参数不符合规则')
        const { data: res } = await this.$http.post('cate/add', {
          name: this.newCate.name
        })
        if (res.status !== 200) return this.$message.error(res.message)
        this.$refs.cateRef.resetFields()
        this.visible = false
        this.$message.success('添加分类成功')
        this.getCateList()
      })
    },
    // 取消新增分类
    addCateHandleCancel () {
      console.log('Clicked cancel button')
      // 关闭窗口清空表单
      this.$refs.cateRef.resetFields()
      this.visible = false
      this.$message.info('已取消新增该分类名')
    },
    // 编辑分类
    async editCate (id) {
      this.eidtVisible = true
      const { data: res } = await this.$http.get(`cate/${id}`)
      this.cateInfo = res.data
      this.cateInfo.id = id
    },
    // 确认编辑分类
    editCateHandleOk () {
      this.$refs.cateRef.validate(async (valid) => {
        if (!valid) return this.$message.error('参数不符合规则,请重新输入')
        const { data: res } = await this.$http.put(`cate/${this.cateInfo.id}`, {
          name: this.cateInfo.name
        })
        if (res.status !== 200) return this.$message.error(res.message)
        this.eidtVisible = false
        this.$message.success('更新该分类信息成功')
        this.getCateList()
      })
    },
    // 取消编辑分类
    editCateHandleCancel () {
      this.$refs.cateRef.resetFields()
      this.eidtVisible = false
      this.$message.info('取消编辑该分类')
    }
  }
}
</script>
